<template>
	<div class="menu">
		<el-menu default-active="2" class="el-menu-box" @open="openMenu" @close="closeMenu" :collapse="isCollapse" router background-color="#363e4f" text-color="#fff" active-text-color="#fff">
			<div class="logo">
				<!-- <img src="@/assets/img/icon/zlogo.png" alt="" /> -->
				<span v-show="!isCollapse">管理系统</span>
			</div>
			<div
				v-menupermission="menu.name"
				:index="menu.meta.jumpNo"
				v-for="menu in menuList"
				:key="menu.meta.jumpNo"
				v-show="
					menu.meta.jumpNo !== 0 &&
					menu.meta.jumpNo !== 9 &&
					menu.meta.jumpNo !== 10 &&
					menu.meta.jumpNo !== 11 &&
					menu.meta.jumpNo !== 13 &&
					menu.meta.jumpNo !== 16 &&
					menu.meta.jumpNo !== 19 &&
					menu.meta.jumpNo !== 20 &&
					menu.meta.jumpNo !== 21 &&
					menu.meta.jumpNo !== 23 &&
					menu.meta.jumpNo !== 35
				"
			>
				<el-submenu v-if="menu.children" :index="menu.meta.jumpNo" @click.native="clcikMenu(menu)">
					<template slot="title">
						<p class="icon-title">
							<img class="menu-icon" :src="menu.meta.icon" alt="" />
						</p>
						<span class="menu-title">{{ menu.meta.title }}</span>
					</template>
					<el-menu-item-group>
						<el-menu-item class="children-menu" v-for="(children, index) in menu.children" :key="index" :index="children.meta.jumpNo" @click="childrenMenu(children)">
							<p class="icon-title">
								<img class="menu-icon" :src="children.meta.icon" alt="" />
							</p>
							<span class="menu-title">{{ children.meta.title }}</span>
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-menu-item v-else :index="menu.meta.jumpNo" @click.native="clcikMenu(menu)">
					<img class="menu-icon" :src="menu.meta.icon" alt="" />
					<span class="menu-title">{{ menu.meta.title }}</span>
				</el-menu-item>
			</div>
		</el-menu>
	</div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
	name: 'menu',
	data() {
		return {
			menuList: [], // 菜单导航
			userRole: localStorage.getItem(`zco_admin_roleId_${window.uid}`)
		};
	},
	computed: {
		...mapState({
			isCollapse: state => state.menu.isCollapse
			// userRole: state => state.login.userInfo.userRole
		}),
		...mapGetters(['getMenuList'])
	},
	mounted() {
		//处理菜单
		this.menuList = this.getMenuList;
		console.log('userRole', this.userRole);
		if (this.userRole?.roles && this.userRole.roles.length > 0) {
			if (this.userRole.roles[0].name !== '机构管理员') {
				// 非机构管理员不能查看 角色权限
				this.menuList = this.filterPermissions(this.menuList);
			}
		}
		console.log('menuList', this.menuList);
	},
	methods: {
		...mapMutations('menu', ['SET_TAG_LIST', 'SET_CACHE_VIEW']),
		clcikMenu(menu) {
			console.log('clcikMenu menu', menu);
			if (!menu.children) {
				this.$router.push(menu.meta.toPath);
				this.$store.commit('SET_TAG_LIST', menu);
				menu.name !== 'agent' && this.$store.commit('SET_CACHE_VIEW', menu); // 坐席管理页面不缓存
			}
		},
		childrenMenu(menu) {
			this.$router.push(menu.meta.toPath);
			this.$store.commit('SET_TAG_LIST', menu);
			this.$store.commit('SET_CACHE_VIEW', menu);
		},
		// 过滤函数，用于去掉 children 中 name 为 'permission' 的对象
		filterPermissions(routes) {
			return routes.map(route => {
				if (route.children && route.children.length) {
					// 过滤掉 children 中的 permission
					route.children = route.children.filter(child => child.name !== 'permission');
				}
				return route;
			});
		}
	}
};
</script>

<style lang="less" scoped>
.logo {
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	height: 56px;
	background-color: #20222a;
	span {
		padding-left: 20px;
	}
	img {
		width: 50px;
	}
}
.menu {
	max-height: 100vh;
	overflow-y: auto;
	background-color: #363e4f !important;

	.menu-title {
		padding-left: 20px;
		font-size: 12px !important;
	}
	.children-menu {
		display: flex;
		background-color: #363e4f !important;
		color: #fff !important;
		&:hover {
			background-color: #2b323f !important;
		}
	}
	.menu-icon {
		// margin: 0 16px;
		width: 16px;
		vertical-align: middle;
	}
	.icon-title {
		display: flex;
		align-items: center;
	}
}
</style>

<style lang="less">
.menu {
	.el-menu-item-group {
		.el-menu-item-group__title {
			display: none !important;
		}
	}
	.arrow {
		color: #fff;
		font-size: 14px;
		padding-left: 50px;
	}
	.el-submenu__icon-arrow {
		opacity: 1;
		color: #fff;
	}
}
.el-menu--vertical {
	display: none;
}
.menu .children-menu {
	color: #fff !important;
}
.menu::-webkit-scrollbar {
	display: none;
}
</style>
